import React from 'react'

import './ui.less'

import { Card, Button, notification, Icon } from 'antd';


class Notices extends React.Component {

    openNotification =(type, direction) => {
        if(direction) {
            // 这是antd提供了一个全局配置方法notification.config，在调用前提前配置，全局一次生效。notification.config(options)
            notification.config({
                placement: direction
              });
        }
        notification[type]({
            message: '今天发工资啦',
            description: '满勤 + 绩效 + 基本工资 月收入 两万, 买买买，字数不够，废话来凑',
            icon: <Icon type="smile" style={{ color: '#108ee9' }} />
          });
    }
    render() {
        return (
            <div>
                <Card title="通知提醒框" className="warp">
                    <Button type="primary" onClick={() =>this.openNotification('success')}>Success</Button>
                    <Button type="primary" onClick={() =>this.openNotification('info')}>Info</Button>
                    <Button type="primary" onClick={() =>this.openNotification('error')}>Error</Button>
                    <Button type="primary" onClick={() =>this.openNotification('warning')}>warning</Button>
                </Card>
                <Card title="通知提醒框 之方向控制" className="warp">
                    <Button type="primary" onClick={() =>this.openNotification('success', 'topLeft')}>topLeft</Button>
                    <Button type="primary" onClick={() =>this.openNotification('info', 'topRight')}>topRight</Button>
                    <Button type="primary" onClick={() =>this.openNotification('error', 'bottomLeft')}>bottomLeft</Button>
                    <Button type="primary" onClick={() =>this.openNotification('warning', 'bottomRight')}>bottomRight</Button>
                </Card>
            </div>
        )
    }
}


export default Notices